import React, { ReactNode, useEffect, useRef, useState } from 'react';
import useSyncState from '../hooks/useSyncState';

import { getVariableWithSessionId } from '@/api';
import { useSelector } from 'react-redux';

import AgentService from '@/modules/Agent';
import Message from '@/utils/message';
import { useTranslation } from 'react-i18next';

export const IdCardVariableList = {
	front: [
		{
			name: '身份证号',
			fieldName: 'idNumber',
			parameterName: '' // {{客户信息_访客_客户ID_1376}}
		},
		{
			name: '姓名',
			fieldName: 'name',
			parameterName: ''
		},
		{
			name: '性别',
			fieldName: 'sex',
			parameterName: ''
		},
		{
			name: '民族',
			fieldName: 'ethnicity',
			parameterName: ''
		},
		{
			name: '出生日期',
			fieldName: 'birthDate',
			parameterName: ''
		},
		{
			name: '住址',
			fieldName: 'address',
			parameterName: ''
		}
	],
	back: [
		{
			name: '签发机关',
			fieldName: 'issueAuthority',
			parameterName: ''
		},
		{
			name: '有效日期',
			fieldName: 'validPeriod',
			parameterName: ''
		}
	]
};

export const BankCardVariableList = [
	{
		name: '卡片类型',
		fieldName: 'cardType',
		parameterName: ''
	},
	{
		name: '卡号',
		fieldName: 'cardNumber',
		parameterName: ''
	},
	{
		name: '银行',
		fieldName: 'bankName',
		parameterName: ''
	},
	{
		name: '有效期',
		fieldName: 'validToDate',
		parameterName: ''
	},

];

const CardCollect = React.createContext<
	| {
			getVariableValue: () => void; // 获取变量值
			variableList: () => any[]; // 变量列表
			roles: () => any[]; // 角色列表
			autoOcr(): boolean; // 是否需要ocr识别
			enableAutoOcr: (status: boolean) => void; // 是否开启ocr识别
			idCardFront: () => any[]; // 身份证正面
			setIdCardFront: (value: any[]) => void;
			idCardBack: () => any[]; // 身份证反面
			setIdCardBack: (value: any[]) => void;
			bankCard: () => any[]; // 银行卡
			setBankCard: (value: any[]) => void;
			ocrResult: any; // ocr识别结果
			setOcrResult: (value: any) => void;
	  }
	| undefined
>(undefined);
CardCollect.displayName = 'CardCollectContext';

const CardCollectProvider = ({ children }: { children: ReactNode }) => {
	const { t } = useTranslation();
	const { session } = useSelector((state: any) => state);

	const [variableList, setVariableList] = useSyncState<any[]>([]);

	const [roles, setRoles] = useSyncState<any[]>([]);

	const [autoOcr, setOcrStatus] = useSyncState<boolean>(false);

	const [idCardFront, setIdCardFront] = useSyncState<any[]>(IdCardVariableList.front);
	const [idCardBack, setIdCardBack] = useSyncState<any[]>(IdCardVariableList.back);
	const [bankCard, setBankCard] = useSyncState<any[]>(BankCardVariableList);
	const [ocrResult, setOcrResult] = useSyncState<any>({}); // ocr识别结果

	const getVariableValue = async () => {
		try {
			const { data } = await getVariableWithSessionId(AgentService.sessionId, AgentService.bizScenarioId);
			let list = data.data.filter((item: any) => !!item.roleId);
			setVariableList(list);
			let newArray: any[] = [];
			let keys = list.map((item: any) => {
				return item.roleId;
			});
			keys = [...new Set(keys)];
			keys.forEach((id: any, index: number) => {
				newArray = [...newArray, { label: (list.find((item: any) => item.roleId === id) as any)?.roleName, value: id }];
				if (index + 1 === keys.length) {
					setRoles(newArray);
				}
			});
		} catch (error) {
			console.log(error, 'getVariableValue');
			Message.error(t('get-variable-failed'));
		}
	};

	const enableAutoOcr = (status: boolean) => {
		setOcrStatus(status);
	};

	return (
		<CardCollect.Provider
			children={children}
			value={{
				getVariableValue,
				variableList,
				roles,
				autoOcr,
				enableAutoOcr,
				idCardFront,
				setIdCardFront,
				idCardBack,
				setIdCardBack,
				bankCard,
				setBankCard,
				ocrResult,
				setOcrResult
			}}
		></CardCollect.Provider>
	);
};

const useCardCollect = () => {
	const context = React.useContext(CardCollect);
	if (!context) {
		throw new Error('useScreenSync 必须在 AppProvider 中使用');
	}
	return context;
};

export { useCardCollect, CardCollectProvider };
